import './subtitle.css';
class SubTitle {
    constructor(onAiStartSpeak, onAiStartDone, onTextMessage, container = '', options = {}) {
        this.subtitles = [];
        this.onAiStartSpeak = onAiStartSpeak;
        this.onAiStartDone = onAiStartDone;
        this.onTextMessage = onTextMessage;
        this.container = container || document.body;
        this.with = null;
        this.height = null;
        this.containerId = null;
        this.left = 0;
        this.bottom = 50;
        this.className = null;
        this.zIndex = 100;
        this.options = options;
        this.ulContainer = null;
        this.msgId = null;
        this.scrollTimer = null;
        this.user = null;
        this.init();
    };

    init () {
        this.initContainer();
        this.createView();
        this.initEvent();
        console.log('###字幕文件加载成功###');
    }



    /** 初始化事件 */
    initEvent () {
        this.onAiStartSpeak((status, resp, msgId) => {
            console.log(status, resp, msgId);
            this.addTextTimer();

        });
        this.onAiStartDone((status, resp, msgId) => {
            this.clearTimer();
            console.log(status, resp, msgId);
        });
        this.onTextMessage((text) => {
            if (!text.data) {
                return;
            }
            this.subtitles = [...this.subtitles, text];
            this.msgId = text.id;
            this.createChild(text)
        });
    }

    /** 初始化容器 */
    initContainer () {
        const { width = window.innerWidth, height = 300, warpper = document.body, className = 'widget-subtitle-warpper', id = 'widget-subtitle-warpper', left = 0, bottom = 80, zIndex = 100, user = null } = this.options;
        this.with = width;
        this.height = height;
        this.container = warpper;
        this.className = className;
        this.containerId = id;
        this.left = left;
        this.bottom = bottom;
        this.zIndex = zIndex;
        this.user = user;
    };

    /** 创建视图层 */
    createView () {
        this.ulContainer = document.createElement('ul');
        this.ulContainer.id = this.containerId;
        this.ulContainer.style.zIndex = this.zIndex;
        this.ulContainer.style.with = this.with + 'px';
        this.ulContainer.style.maxHeight = this.height + 'px';
        this.ulContainer.style.bottom = this.bottom + 'px';
        this.ulContainer.style.left = this.left + 'px';
        this.ulContainer.style.zIndex;
        this.ulContainer.className = this.className;
        this.container.appendChild(this.ulContainer);
    }

    /** 创建子元素 */
    createChild (text) {
        const childContianer = document.createElement('li');
        const nameLabel = document.createElement('span');
        const textContianer = document.createElement('span');
        console.log(this.user.clientId, text.from);
        nameLabel.className = this.user && this.user.clientId === text.from ? 'self-label' : 'other-label';
        textContianer.className = 'subtitle-text';
        childContianer.className = 'subtitle-text-warpper';
        nameLabel.innerText = this.getRoleLabel(text);
        childContianer.appendChild(nameLabel);
        childContianer.appendChild(textContianer);
        textContianer.innerHTML = this.filterText(text.data);
        textContianer.id = text.id;
        this.ulContainer.appendChild(childContianer);
        textContianer.scrollIntoView();
    }

    isAgent (role) {
        return role === 'agent';
    }

    /** 忽略文字 */
    filterText (text) {
        if (text === 'silence-msg' || text === 'OnTaskFailed' || text.indexOf('Timeout to') !== -1) {
            return '';
        } else {
            return text;
        }
    };

    getRoleLabel () {
        return this.isAgent(text.fromUser.role) ? `坐席 ${text.fromUser.name}：` : this.user && this.user.clientId === text.from ? '我：' : `${text.fromUser.name}`;
    }


    addTextTimer () {
        setTimeout(() => {
            let ele = document.getElementById(this.msgId);
            if (ele) {
                this.scrollTimer = setInterval(() => {
                    if (ele.scrollHeight - ele.scrollTop <= ele.offsetHeight - 16) {
                        clearInterval(this.scrollTimer);
                        console.log('clear interval:', this.scrollTimer);
                        this.scrollTimer = null;
                    }
                    ele.scrollTop++;
                }, 360);
            }
        }, 800)

    };

    clearTimer () {
        if (this.scrollTimer) {
            clearInterval(this.scrollTimer);
            this.scrollTimer = null;
        }

    };


    pxToNumber (px) {
        const num = Number(px.replace("px", ""));
        return num;
    };



    /** 销毁元素 */
    destory () {
        if (this.ulContainer) {
            document.body.removeChild(this.ulContainer);
        }
        this.clearTimer();
        this.subtitles = [];
        this.onAiStartSpeak = null;
        this.onAiStartDone = null;
        this.onTextMessage = null;
        this.container = null;
        this.with = null;
        this.height = null;
        this.containerId = null;
        this.left = 0;
        this.bottom = 50;
        this.className = null;
        this.zIndex = 100;
        this.options = null;
        this.ulContainer = null;
        this.msgId = null;
    }




}


export default SubTitle;